<template>
	<view class="template-tool-oldcalc gray-content">
		<tn-notice-bar :list="noticeList" backgroundColor="tn-bg-blue" fontColor="#FFFFFF" mode="horizontal"></tn-notice-bar>
		<view class="calc_content">
			<tn-form :model="form" ref="form" :labelWidth="280" labelAlign="center" :errorType="['toast']">
				<tn-form-item label="性别" prop="sex">
					<tn-radio-group v-model="form.sex">
						<tn-radio v-for="(item, index) in sexTypes" activeColor="#ffd946" shape="square" :key="index" :name="item.id">{{ item.name }}</tn-radio>
					</tn-radio-group>
				</tn-form-item>
				<tn-form-item label="上一年全省平均工资">
					<tn-input v-model="form.aveMoney" type="number" placeholder="全省平均工资" />
				</tn-form-item>
				<tn-form-item label="平均每月缴费基数">
					<tn-input v-model="form.workMoney" type="number" placeholder="平均每月缴费" />
				</tn-form-item>
				<tn-form-item label="缴费年限">
					<view @click="yearShow = true;" class="selectYear">{{ form.year }}年</view>
				</tn-form-item>
				<tn-form-item label="退休年龄" prop="outAge">
					<tn-radio-group v-model="form.outAge">
						<tn-radio v-for="(item, index) in outAgeTypes" activeColor="#ffd946" shape="square" :key="index" :name="item.id">{{ item.name }}</tn-radio>
					</tn-radio-group>
				</tn-form-item>
			</tn-form>
		</view>
		<view class="tn-margin">
			<tn-button class="common-button" width="100%" @click="calc">计算</tn-button>
		</view>
		<tn-select v-model="yearShow" :searchShow="false" mode="single" :list="yearList" @confirm="yearConfirm"></tn-select>

		<tn-modal v-model="resultShow" :custom="true" showCloseBtn>
			<view class="result-modal-content">
				<yiyi-title title="养老金计算结果" />
				<view class="content tn-flex tn-flex-direction-column tn-flex-col-center">
					<view class="item">
						<text class="title">个人养老金</text>
						<tn-count-to class="value" :startVal="0" :endVal="resultPersonMoney"></tn-count-to>
					</view>
					<view class="item">
						<text class="title">基础养老金</text>
						<tn-count-to class="value" :startVal="0" :endVal="resultBaseMoney"></tn-count-to>
					</view>
					<view class="item total">
						<text class="title">每月发放总额</text>
						<tn-count-to class="value" :startVal="0" :endVal="totalMoney"></tn-count-to>
					</view>
				</view>
			</view>
		</tn-modal>

	</view>


	<!-- 
	基础养老金=（A+A×Q）÷2×M×1%
	A～退休上年度全市城镇经济单位在岗职工月平均工资
	M～缴费年限（含视同缴费年限，不含折算工龄）
	Q～个人平均缴费指数（由历年缴费中的当年本人月缴费基数与对应上年全市在岗职工月平均工资比值的平均数确定）
	
	个人账户养老金=K÷L
	K～退休时个人账户累计储存额（含利息）
	L～本人退休年龄相对应的计发月数
	-->
</template>

<script>
	import { sexTypes, outAgeTypes } from '@/utils/enums';
	export default {
		components: {},
		data() {
			return {
				yearShow: false,
				sexTypes,
				outAgeTypes,
				resultShow: false,
				resultPersonMoney: 0,
				resultBaseMoney: 0,
				personRate: 0.08,
				yearList: [],
				noticeList: [
					'本计算方法只按照当前值来计算，未来不做推算'
				],
				form: {
					sex: '0',
					aveMoney: 5000,
					workMoney: 5000,
					year: 20,
					outAge: '60'
				},
				rules: {
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur'],
					}],
					workMoney: [{
						required: true,
						message: '请输入缴费工资',
						trigger: ['change', 'blur'],
					}],
					year: [{
						required: true,
						message: '请选择缴费年限',
						trigger: ['change', 'blur'],
					}],
					outAge: [{
						required: true,
						message: '请选择退休年龄',
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		onLoad() {
			for (var i = 15; i <= 30; i++) {
				this.yearList.push({
					value: i,
					label: i + "年"
				})
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		computed:{
			totalMoney(){
				return  Number(Number(this.resultBaseMoney) + Number(this.resultPersonMoney));
			}
		},
		methods: {
			yearConfirm(e) {
				this.form.year = e[0].value;
			},
			calc() {
				this.$refs.form.validate(valid => {
					if (valid) {
						this.$tn.message.loading("正在计算中...");
						setTimeout(() => {
							this.$tn.message.closeLoading();
							let outAge = this.outAgeTypes.find(item => this.form.outAge == item.id);
							let personMoney = ((this.form.workMoney * this.personRate * this.form.year * 12) / outAge.month).toFixed(2);
							let baseMoney = (Number(this.form.aveMoney) + Number(this.form.aveMoney) * (this.form.workMoney / this.form.aveMoney).toFixed(2)) / 2 * this.form.year * 0.01;
							this.resultShow = true;
							this.resultPersonMoney =  Number(personMoney);
							this.resultBaseMoney =  Number(baseMoney);
						}, 1500);

					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.template-tool-oldcalc {
		height: 100vh;

		.result-modal-content {
			.content {
				.item {
					margin: 20rpx 0rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.title {
						font-size: 30rpx;
						font-weight: bolder;
						margin-right: 20rpx;
					}

					.value {
						font-size: 40rpx;
						font-weight: bolder;
					}
				}
			}
		}

		.calc_content {
			height: max-content;
			background-color: #FFF;
			margin: 20rpx 20rpx;
			padding: 0 10rpx;

			.selectYear {
				width: 100%;
			}

		}
	}
</style>